import 'package:flutter/material.dart';
import 'package:flutter_saixiaoli/pages/home/underlinePainter.dart';

class Tabs extends StatefulWidget {
  final TabController tabc;
  final List tabbarViewData;
  final List tabs;

  const Tabs({Key key, this.tabc, this.tabs, this.tabbarViewData})
      : super(key: key);
  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int tabIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 50,
          child: TabBar(
            controller: widget.tabc,
            onTap: (val) {
              setState(() {
                tabIndex = val;
              });
            },
            tabs: widget.tabs
                .map((item) => Tab(
                      text: item['name'],
                    ))
                .toList(),
            //  indicatorPadding: EdgeInsets.only(bottom: 1),
            labelColor: Color.fromRGBO(191, 55, 54, 1),
            unselectedLabelColor: Colors.black,
            indicator: UnderlinePainter(
                borderSide: BorderSide(
                    width: 6.0, color: Color.fromRGBO(248, 235, 235, 1))),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 12),
          height: 450,
          child: TabBarView(
              controller: widget.tabc,
              children: widget.tabs
                  .map((items) => Container(
                        child: GridView.count(
                          childAspectRatio: 0.75,
                          shrinkWrap: true,
                          physics: NeverScrollableScrollPhysics(),
                          crossAxisCount: 2,
                          children: widget.tabbarViewData
                              .map((item) => Container(
                                      child: Column(
                                    children: [
                                      Container(
                                        height: 100,
                                        alignment: Alignment.topLeft,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(5)),
                                        padding: EdgeInsets.all(10),
                                        child: Container(
                                          alignment: Alignment.center,
                                          width: 80,
                                          height: 17,
                                          decoration: BoxDecoration(
                                              color:
                                                  Color.fromRGBO(0, 0, 0, 0.3),
                                              borderRadius:
                                                  BorderRadius.circular(8)),
                                          child: Text(
                                            '${item['city']}出发 | ${item['day']}天',
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 10,
                                                height: 1.0),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        margin: EdgeInsets.only(top: 14),
                                        child: RichText(
                                          text: TextSpan(children: [
                                            if (item['chengxing'])
                                              WidgetSpan(
                                                child: Container(
                                                  margin:
                                                      EdgeInsets.only(right: 3),
                                                  width: 50,
                                                  height: 17,
                                                  alignment: Alignment.center,
                                                  decoration: BoxDecoration(
                                                      gradient: LinearGradient(
                                                          colors: [
                                                        Color.fromRGBO(
                                                            67, 112, 246, 1),
                                                        Color.fromRGBO(
                                                            123, 155, 249, 1)
                                                      ])),
                                                  child: Text(
                                                    '已成行',
                                                    style: TextStyle(
                                                        color: Colors.white,
                                                        fontSize: 11,
                                                        height: 1.0),
                                                  ),
                                                ),
                                              ),
                                            TextSpan(
                                                text: '${item['title']}',
                                                style: TextStyle(
                                                    color: Colors.black))
                                          ]),
                                        ),
                                      ),
                                      //副标题
                                      Container(
                                        alignment: Alignment.centerLeft,
                                        margin: EdgeInsets.only(top: 10),
                                        child: Text(
                                          '${item['subtitle']}',
                                          style: TextStyle(
                                              color: Color.fromRGBO(
                                                  136, 136, 136, 1),
                                              fontSize: 12),
                                        ),
                                      ),
                                      //价格
                                      Container(
                                        margin: EdgeInsets.only(top: 10),
                                        child: Row(
                                          children: [
                                            Container(
                                              child: Text(
                                                '￥',
                                                style: TextStyle(
                                                    color: Color.fromRGBO(
                                                        191, 55, 54, 1),
                                                    fontSize: 11),
                                              ),
                                            ),
                                            Container(
                                                child: Text(
                                              '${item['price']}',
                                              style: TextStyle(
                                                  color: Color.fromRGBO(
                                                      191, 55, 54, 1),
                                                  fontSize: 16),
                                            )),
                                            Container(
                                              margin: EdgeInsets.only(left: 3),
                                              child: Text(
                                                '起',
                                                style: TextStyle(
                                                    color: Color.fromRGBO(
                                                        102, 102, 102, 1),
                                                    fontSize: 9),
                                              ),
                                            )
                                          ],
                                        ),
                                      )
                                    ],
                                  )))
                              .toList(),
                        ),
                      ))
                  .toList()),
        ),
      ],
    );
  }
}
